<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" th:href="@{/css/BColumn.css}" />
		<link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}" />
		<link rel="stylesheet" th:href="@{/css/BVideo.css}" />
		<style>

		</style>
	</head>
	<body>
		<div class="container-fluid bmTopDiv">
			<div class="col-md-1 bmTopLogoFont">
				<h3>BhSyVideo</h3>
			</div>
			<div class="col-md-2 bmTopXxDiv">
				<ul class="">
					<li class="bmToplif"><a style="text-decoration: none;color: white" th:href="@{/bhsy/theMain}"> 首页</a></li>
				</ul>
			</div>
		</div>

		<div class="all">
			<div class="left">
				<a class="lwl" style="color: #00a1d6"  th:href="@{'/bhsy/BColumn'}"><img class="ScImg"  th:src="@{/images/BColumn/bszl1.png}" /><span>推荐</span></a><br />
				<a class="lwl"  th:href="@{'/bhsy/BColumn2/动画'}"><img class="ScImg"  th:src="@{/images/BColumn/bszlH2.png}"/><span>动画</span></a><br />
				<a class="lwl" th:href="@{'/bhsy/BColumn2/游戏'}"><img class="ScImg"  th:src="@{/images/BColumn/bszlH3.png}"/><span>游戏</span></a><br />
				<a class="lwl" th:href="@{'/bhsy/BColumn2/影视'}"><img class="ScImg"  th:src="@{/images/BColumn/bszlH4.png}"/><span>影视</span></a><br />
				<a class="lwl" th:href="@{'/bhsy/BColumn2/生活'}"><img class="ScImg"  th:src="@{/images/BColumn/bszlH5.png}"/><span>生活</span></a><br />
				<a class="lwl" th:href="@{'/bhsy/BColumn2/兴趣'}"><img class="ScImg"  th:src="@{/images/BColumn/bszlH6.png}"/><span>兴趣</span></a><br />
				<a class="lwl" th:href="@{'/bhsy/BColumn2/轻小说'}"><img class="ScImg"  th:src="@{/images/BColumn/bszlH7.png}"/><span>轻小说</span></a><br />
				<a class="lwl" th:href="@{'/bhsy/BColumn2/科技'}"><img class="ScImg"  th:src="@{/images/BColumn/bszlH8.png}"/><span>科技</span></a><br />
				<a class="lwl" th:href="@{'/bhsy/BColumn2/笔记'}"><img class="ScImg"  th:src="@{/images/BColumn/bszlH9.png}"/><span>笔记</span></a><br />
			</div>
			<div class="right">
				<div class="right-left">
					<h1>推荐文章</h1>
					<div th:each="h:${list}">
						<a th:href="@{'/scolumn/'+${h.uid}+'/'+${h.sid}+'/'+${h.sName}}" >
							<div class="right-left-left">
								<span class="biaoti" th:text="${h.sName}"></span>
								<div class="neirong" >
									<span th:text="${h.sMsg}"></span>
								</div>
								<div class="qita">
									<a>
										<img th:src="${h.uImg}" class="qitatp" th:text="${h.uName}"/><span></span>
									</a>
									<a><span th:text="${h.sTag}"></span></a>
<!--									<span><img th:src="@{/images/BColumn/liulanliang.png}" />1111</span>-->
									<img th:src="@{/images/BColumn/dianzan.png}" /><span th:text="${h.sUp}"></span>
<!--									<a><span><img th:src="@{/images/BColumn/pinglun.png}" />12</span></a>-->
									<span th:text="${#dates.format(h.sTime,'yyyy-MM-dd')}"></span>
								</div>
							</div>
							<div class="right-left-right">
								<a><img th:src="'http://r1xjdohxw.hn-bkt.clouddn.com/'+${h.sImg}" /></a>
<!--								<span th:text="${p.sImg}"></span>-->
							</div>
						</a>
					</div>

				</div>
				<div class="right-right">
					<div class="ssk">
						<a href="/bhsy/Bsearch">
							<input placeholder="搜索专栏文章" />

								<img align="center" th:src="@{/images/BColumn/sousuo.png}" width="15px" height="15px"/>
							</a>
					</div>
					<div class="phb">
						<span>排行榜</span>
						<span style="color: #00a1d6;">昨天</span>
						<hr />
					</div>
					<ul class="phbnr" th:each="h:${list2}">
						<li class="ph">
<!--							<span th:text="${h.size}"></span>-->
							<a th:text="${h.sMsg}"></a>
						</li>
					</ul>
				</div>


			</div>
		</div>
	</body>
	<script th:src="@{/js/jquery-360.min.js}"></script>
	<script>

		window.onload = function () {
			var lwl=document.getElementsByClassName("lwl");
			var ScImg = document.getElementsByClassName("ScImg");

			var scIndex = 0;
			var w=0;
			for (let i = 0; i < lwl.length ; i++) {
				lwl[i].onclick=function () {
					// var lwl2=$(".lwl span").eq(i).text();
					// alert(lwl2);

					ScImg[scIndex].src="/images/BColumn/bszlH"+(scIndex+1)+".png";
					ScImg[i].src="/images/BColumn/bszl"+(i+1)+".png";
					this.style.color="#00a1d6";
					lwl[scIndex].style.color="";
					scIndex=i;
					w=1;
				}

			}
		}

		var ph=document.getElementsByClassName("ph");
		for (var i=0;i<ph.length;i++) {
			ph[i].onmouseover=function(){
				this.style.color="#00a1d6";
			}
			ph[i].onmouseout=function(){
				this.style.color="";
			}
		}
	</script>
</html>
